<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/app.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <title>Blog</title>
</head>
<body>
    <div class="content">
        <div class="leftBar">
            <h1>后台管理</h1>
            <ul>
                <li onclick="changeTab(0)">个人</li>
                <li onclick="changeTab(1)">博客</li>
                <li onclick="changeTab(2)">分栏</li>
                <li onclick="changeTab(3)">留言</li>
                <li onclick="changeTab(4)">公告</li>
            </ul>
        </div>
        <iframe id="tab" th:src="@{/user/{id}(id=${user.id})}"
        frameborder="no" marginwidth="0"
        scrolling="yes" allowtransparency="yes">
        </iframe>
    </div>
</body>
<script th:inline="javascript" type = "text/javascript">
    let uid=[[${user.id}]];
    let context=[[${#servletContext.contextPath}]];
    let host=[[${host}]];
    let port=[[${port}]];
    function changeTab(index){
        let iframeBox=document.getElementById("tab");
        let newUrl;
        let baseUrl="http://"+host+":"+port+context+"/user/"+uid;
        console.log(baseUrl);
        switch(index){
            case 0:newUrl="";break;
            case 1:newUrl="/blogs";break;
            case 2:newUrl="/categories";break;
            case 3:newUrl="/messages";break;
            case 4:newUrl="/notices";break;
        }
        iframeBox.src=baseUrl+newUrl;
    }
</script>
</html>